<template>
  <div class="infinite-canvas">
    <div
        class="canvas"
        ref="canvas"
        :style="{
        transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`
      }"
    >
      <!-- 在这里添加你的画布内容 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scale: 1,
      translateX: 0,
      translateY: 0,
      lastX: 0,
      lastY: 0,
      isDragging: false
    };
  },
  methods: {
    handleMouseDown(event) {
      this.isDragging = true;
      this.lastX = event.clientX;
      this.lastY = event.clientY;
    },
    handleMouseUp() {
      this.isDragging = false;
    },
    handleMouseMove(event) {
      if (this.isDragging) {
        const deltaX = event.clientX - this.lastX;
        const deltaY = event.clientY - this.lastY;
        this.lastX = event.clientX;
        this.lastY = event.clientY;
        this.translateX += deltaX;
        this.translateY += deltaY;
      }
    },
    handleWheel(event) {
      event.preventDefault();
      const zoomSpeed = 0.1;
      const scaleDelta = event.deltaY > 0 ? -zoomSpeed : zoomSpeed;
      const oldScale = this.scale;
      this.scale = Math.max(0.1, Math.min(3, this.scale + scaleDelta));

      // Adjust translateX and translateY to keep the same point under the cursor.
      this.translateX +=
          (event.clientX - this.$refs.canvas.getBoundingClientRect().left) *
          (1 / oldScale - 1 / this.scale);
      this.translateY +=
          (event.clientY - this.$refs.canvas.getBoundingClientRect().top) *
          (1 / oldScale - 1 / this.scale);
    }
  }
};
</script>

<style scoped>
.infinite-canvas {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}

.canvas {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  user-drag: none;
  cursor: grab;
}
</style>
